<template>
  <div>
    <CategorySelector style="margin-bottom:10px" :isDisable="!isShowAttrList"></CategorySelector>
    <div v-if="isShowAttrList">
      <el-button type="primary" :icon="Plus" @click="toaddAttr">添加属性</el-button>
      <el-table v-loading="loading" ref="singleTableRef" highlight-current-row style="width: 100%;margin-top: 10px;"
        :data="attrList" border>
        <el-table-column type="index" width="80px" label="序号" align="center" />
        <el-table-column property="date" label="属性名称" prop="attrName" />
        <el-table-column property="name" label="属性值列表">
          <template v-slot="{ row }">
            <el-tag v-for="attrValue in row.attrValueList" :key="attrValue.id"
              style="margin-right: 6px; margin-bottom: 6px">
              {{ attrValue.valueName }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template v-slot="{ row }">
            <el-tooltip class="box-item" effect="dark" content="修改属性" placement="top">
              <el-button type="warning" size="small" :icon="Edit" @click="toEditAttr(row)"></el-button>
            </el-tooltip>

            <el-popconfirm confirm-button-text="Yes" cancel-button-text="No" title="真的要删除此属性吗?"
              @confirm="deleteConfirm(row.id)">
              <template #reference>
                <div style="display: inline-block; margin-left: 10px">
                  <el-tooltip class="box-item" effect="dark" content="删除属性" placement="top">
                    <el-button type="danger" size="small" :icon="Delete"></el-button>
                  </el-tooltip>
                </div>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div v-else>
      <el-form>
        <el-form-item label="属性名" style="width:300px">
          <el-input placeholder="请输入属性名" v-model="attrInfo.attrName" wdith="200px" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="toAddAttrValue">添加属性值</el-button>
          <el-button type="default" @click="isShowAttrList = true">取消</el-button>
        </el-form-item>
      </el-form>
      <el-table :data="attrInfo.attrValueList" border>
        <el-table-column label="序号" type="index" align="center" width="80px"></el-table-column>
        <el-table-column label="属性值名称">
          <template v-slot="{ row, $index }">
            <el-input size="small" v-model="row.valueName" v-if="row.isShowInput" ref="inputRef"
              @blur="toDeleteRow(row, $index)"></el-input>
            <span @dblclick="toEditAttrValue(row)" v-else>{{ row.valueName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template v-slot="{ $index }">
            <el-popconfirm confirm-button-text="Yes" cancel-button-text="No" title="真的要删除此属性吗?"
              @confirm="deleteAttrValue($index)">
              <template #reference>
                <div style="display: inline-block; margin-left: 10px">
                  <el-tooltip class="box-item" effect="dark" content="删除属性" placement="top">
                    <el-button type="danger" size="small" :icon="Delete"></el-button>
                  </el-tooltip>
                </div>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <el-button type="primary" @click="saveAttrInfo" style="margin-top:10px">保存</el-button>
      <el-button type="default" @click="isShowAttrList = true" style="margin-top:10px">取消</el-button>
    </div>
  </div>
</template>

<script lang="ts">
export default {
  name: "Attr",
};
</script>

<script lang="ts" setup>
import { Plus, Edit, Delete } from "@element-plus/icons-vue";
import { ref, reactive, nextTick } from "vue";
import CategorySelector from "@/components/CategorySelector/index.vue";
import { useCategoryListStore } from "@/stores/categoryList";
import { watch } from "vue";
import { reqGetAttrListDataByCategory3Id, reqDeleteOneAttr, reqSaveOrUpdateAttr } from "@/api/product/attr";
import { ElMessage } from 'element-plus';
import type { attrInfoType, AttrListType } from '@/api/product/model/AttrModel'

//控制是否显示属性列表
const isShowAttrList = ref<boolean>(true);

//属性列表信息
const attrList = ref<AttrListType>([]);

//获取categoryStore对象
const categoryStore = useCategoryListStore();

//页面加载效果
const loading = ref(false)

//定义一个对象，获得焦点
const inputRef = ref<any>(null)


//收集要添加的属性信息
const attrInfo = reactive<attrInfoType>({
  attrName: '', // 要存储的属性名
  attrValueList: [], // 存储属性值的数组
  categoryLevel: 3, // 等级
  categoryId: -1 // id值
})

//封装获取属性列表数据请求
const getAttrListData = async () => {
  loading.value = true
  //三级导航变化后，请求属性列表数据
  const result = await reqGetAttrListDataByCategory3Id({
    category1Id: categoryStore.category1Id,
    category2Id: categoryStore.category2Id,
    category3Id: categoryStore.category3Id,
  });
  loading.value = false
  // console.log(result)
  //获取的品牌列表数据赋值给attrList
  attrList.value = result;
}

//监视三级导航id值的变化
watch(
  () => categoryStore.category3Id,
  (category3Id) => {
    if (!category3Id) {
      attrList.value = [];
      return;
    }
    //获取属性列表数据请求
    getAttrListData()
  },
  { immediate: true }
);


//删除一个attr列表数据
const deleteConfirm = async (id: number) => {
  //删除一个attr
  await reqDeleteOneAttr(id)
  //删除成功提示
  ElMessage.success('删除成功')
  //获取属性列表数据请求
  getAttrListData()
}

//点击添加属性按钮
const toaddAttr = () => {
  //属性列表不显示
  isShowAttrList.value = false
  //清空添加属性的旧值
  attrInfo.attrName = ''
  attrInfo.attrValueList = []
  delete attrInfo.id
}

//添加属性值,其实就是给attrInfo.attrValueList数组中添加内容
const toAddAttrValue = () => {
  attrInfo.attrValueList.push({
    valueName: '',
    isShowInput: true,
  })
  //获得焦点
  nextTick(() => {
    inputRef.value?.focus()
  })
}

//失去焦点时，如果没有值，删除此行
const toDeleteRow = (row: any, index: any) => {
  if (!row.valueName) {
    attrInfo.attrValueList.splice(index, 1)
    return
  }
  row.isShowInput = false
}

//编辑属性值
const toEditAttrValue = (row: any) => {
  //显示input输入框
  row.isShowInput = true
  //获得焦点
  nextTick(() => {
    inputRef.value?.focus()
  })
}

//删除属性值
const deleteAttrValue = (index: number) => {
  attrInfo.attrValueList.splice(index, 1)
}

//添加属性
const saveAttrInfo = async () => {
  attrInfo.categoryId = categoryStore.category3Id as number
  await reqSaveOrUpdateAttr(attrInfo)
  ElMessage.success(`${attrInfo.id ? '属性修改' : '属性添加'}成功`)
  isShowAttrList.value = true
  getAttrListData()

}

//修改属性
const toEditAttr = (row: attrInfoType) => {
  //弹出修改属性页面
  isShowAttrList.value = false
  console.log(row)
  //修改页面数据回显功能
  Object.assign(attrInfo, row)
}
</script>

<style></style>